export default {
  data() {
    return {
      // 新增或修改
      title: undefined,
      form: {
        album:undefined
      },
      open: false,
      rules: {},
      // 显示详情
      openDetail: false,
      detailTitle: '详情显示',
      formDetail: {}

    }
  } ,
  methods: {
    // 表单重置
    cancelForm() {
      this.open=false
      this.rest()
    },
    // 清空表单的值
    rest(){
      // element-ui内置方法
      if(this.$refs['form']){
        this.$refs['form'].resetFields()
      }
      // 自定义初始化值
      this.initFormValue()
    },
    // 初始化值
    initFormValue() {
    },
    // 上传图片之前的验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      return isJPG && isLt1M;
    },
    // 新增
    handleAdd(){
      this.title= '新增数据'

      console.log('---添加新增之前的钩子函数,preAddHandler()------')
      // 如果有这个变量
      if(this.preAddHandler && this.preAddHandler instanceof Function ){
        this.preAddHandler()
      }
      this.open =true
    },
    // 修改
    handleUpdate(row) {
      this.title= '编辑数据'
      //得到要编辑的主键
      const id= row? row[this.primaryKey] : this.ids[0]
      console.log(id)
      //查询数据
      if(this.fetchByIdHook && this.fetchByIdHook instanceof Function){
        this.open=true

        console.log('---定义修改之前的钩子函数,preEditHandler(id)------')
        // 如果有这个变量
        if(this.preEditHandler && this.preEditHandler instanceof Function ){
          this.preEditHandler(id)
        }

        // 钩子函数(根据主键查询数据)
        const hookInvok = this.fetchByIdHook()

        hookInvok(id).then(resp => {
          this.form = resp.data
          console.log('---定义修改之后的钩子函数,postEditHandler()------')
        }).catch(e=> {
          this.open=false
        })


      }else{
        this.$message.error('必须先创建名为fetchByIdHook的钩子函数，根据主键查询数据');
      }

    },
    // 查看详情
    handleView(row){
      //查询数据
      if(this.fetchByIdHook && this.fetchByIdHook instanceof Function){
        this.openDetail =true

        console.log('---定义详情之前的钩子函数,preViewHandler(id)------')
        // 如果有这个变量
        if(this.preViewHandler && this.preViewHandler instanceof Function ){
          this.preViewHandler(row[this.primaryKey])
        }

        // 钩子函数(根据主键查询数据)
        const hookInvok = this.fetchByIdHook()

        hookInvok(row[this.primaryKey]).then(resp=> {
          this.formDetail = resp.data
        })

      }else{
        this.$message.error('必须先创建名为fetchByIdHook的钩子函数，根据主键查询数据');
      }
    },
    //表单保存
    submitForm(){
      // 验证数据有效性
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.form[this.primaryKey]){
            this.editSave()
          }else{
            this.addSave()
          }
        }
      })
    },
    // 新增保存
    addSave() {

      console.log('---定义新增保存之前的钩子函数,preAddSaveHandler()------')
      // 如果有这个变量
      if(this.preAddSaveHandler && this.preAddSaveHandler instanceof Function ){
        this.preAddSaveHandler()
      }

      this.addApi(this.form).then(resp=> {
        this.$message({ type: 'success', message: '操作成功!' })
        this.cancelForm()
        this.fetchData()
      })

    },
    // 修改保存
    editSave(){

      console.log('---定义修改保存之前的钩子函数,preEditSaveHandler()------')
      // 如果有这个变量
      if(this.preEditSaveHandler && this.preEditSaveHandler instanceof Function ){
        this.preEditSaveHandler()
      }

      this.editApi(this.form).then(resp=> {
        this.$message({ type: 'success', message: '操作成功!' })
        this.cancelForm()
        this.fetchData()
      })
    },
    // 删除
    handleDelete(row) {
      // 可能是一个值， 也可以多选的[]
      const deleteId = row ? row[this.primaryKey]: this.ids;
      this.$modal.confirm('是否确认删除编号为"' + deleteId + '"的数据项？').then(() => {
        // 调用异步请求
        this.delApi(deleteId).then( resp => {
          this.$message({ type: 'success', message: '操作成功!' })
          // 重新查询数据
          this.fetchData()
        })

      }).catch(() => {});

    },
  }
}
